/*
 * @Author: Drc
 * @Date: 2020-07-08 14:27:04
 * @LastEditors: Drc
 * @LastEditTime: 2021-11-04 17:28:32
 */

import {ThemeText} from '@path/components/ThemeComponents'
import Theme from '@path/config/theme'
import Locale from '@path/locale'
import React from 'react'
import {View, Image, ViewStyle, TextStyle} from 'react-native'

interface NoDataProps {
  text?: string
  style?: ViewStyle
  image?: JSX.Element
  tintColor?: string
  textStyle?: TextStyle
}

let cacheProps: NoDataProps = {}

export default class NoData extends React.Component<NoDataProps> {
  constructor(props: any) {
    super(props)
  }

  static defaultProps: NoDataProps = {
    text: '',
    style: {},
    image: undefined,
    tintColor: '',
    textStyle: {},
  }

  static setupDefault = (props: NoDataProps) => {
    cacheProps = props
    this.defaultProps = {
      ...this.defaultProps,
      ...cacheProps,
    }
  }

  render() {
    const {text, style, image, tintColor, textStyle} = this.props
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          ...cacheProps.style,
          ...style,
        }}>
        {image || cacheProps.image}
        <ThemeText
          style={{
            marginTop: 16,
            fontSize: 14,
            color: tintColor || cacheProps.tintColor || Theme.getThemeColor('text_tip'),
            ...cacheProps.textStyle,
            ...textStyle,
          }}>
          {text || Locale.getString('common.no_data')}
        </ThemeText>
      </View>
    )
  }
}
